<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css">
    <style>
        .ball {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <button @click="flag=!flag">动画</button>
        <!-- 动画入场的生命周期 -->
        <transition 
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter">
            <div class="ball" v-show="flag"></div>
        </transition>
        
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag: false
            }, 
            methods: {
                // 注意：动画钩子函数的第一个参数，表示要执行动画的DOM元素
                // el 相当于 document.getElementById('xx')得到的
                beforeEnter(el){
                    // 表示动画入场，这时动画还没有开始
                    // 可以在这里设置动画起始的样式

                    // 设置小球开始动画之前的起始位置
                    el.style.transform = "translate(0, 0)";
                },
                enter(el, done){
                    // 这句话没有实际作用，但如果不写，就没有动画效果
                    el.offsetWidth;
                    // 表示动画开始的样式，这里可以设置小球完成动画之后，结束状态
                    el.style.transform = "translate(150px, 350px)";
                    el.style.transition = "all 1s ease";  
                    
                    // done 其实是 afterEnter() 函数的引用，
                    done();                  
                },
                afterEnter(el){
                    // 动画完成后，就会调用
                    this.flag = !this.flag;
                }
            }
        });
    </script>
</body>
</html>